<template>
    <div id="app">
        <RouterView v-if="isRouterAlive" />
    </div>
</template>

<script>

export default {
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            isRouterAlive: true
        }
    },
    watch: {
        $route: 'routeChange'
    },
    mounted() {
        // 检查是否在 CEFSharp 环境中
        if (typeof window.CefSharp !== 'undefined') {
            console.log('🔍 [App] 检测到 CEFSharp 环境，开始绑定对象...')
            window.CefSharp.BindObjectAsync('cefSharpServer')
                .then(() => {
                    console.log('✅ [App] cefSharpServer 绑定成功')
                })
                .catch(error => {
                    console.error('❌ [App] cefSharpServer 绑定失败:', error)
                })
            
            window.CefSharp.BindObjectAsync('cefSharpNative')
                .then(() => {
                    console.log('✅ [App] cefSharpNative 绑定成功')
                })
                .catch(error => {
                    console.error('❌ [App] cefSharpNative 绑定失败:', error)
                })
        } else {
            console.log('🔍 [App] 非 CEFSharp 环境，跳过对象绑定')
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false
            this.$nextTick(() => (this.isRouterAlive = true))
        },
        routeChange(newVal, oldVal) {
            if (newVal.name == oldVal.name) {
                this.reload()
            }
        }
    },
    metaInfo: {
        titleTemplate: title => {
            return title
                ? `${title} - ${process.env.VUE_APP_TITLE}`
                : process.env.VUE_APP_TITLE
        }
    }
}
</script>

<style>
#app {
    font-family: Arial, sans-serif;
}
</style>
